<style>
.el-table .cell {
    white-space: pre-line;
    text-align: center;
}

.el-table th {
    text-align: center;
}

.formDiv .el-form-item__content {
    min-width: 150px;
}

.page {
    padding: 10px;
}
</style>
<template>

    <el-form v-if="converterSearchFields.length > 0 || buttons.length > 0" :inline="true" :model="searchData"
        class="formDiv">

        <el-form-item v-for="item, key in converterSearchFields" :key="key" :label="item.label">

            <template v-if="item.type === 'select'">

                <el-select v-model="searchData[item.key]" :size="size" clearable filterable
                    :placeholder="item.placeholder" @change="item.change">
                    <el-option v-for="v, k in item.options" :key="k" :label="v?.label ?? v.name" :value="v.value" />
                </el-select>
            </template>

            <template v-else-if="item.type === 'input'">
                <el-input type="text" v-model="searchData[item.key]" :size="size" clearable
                    :placeholder="item.placeholder" />
            </template>

            <template v-else-if="item.type === 'datetimerange'">
                <el-date-picker :size="size" v-model="searchData[item.key]" type="datetimerange"
                    :start-placeholder="item?.placeholder?.[0] || '开始时间'"
                    :end-placeholder="item?.placeholder?.[1] || '结束时间'" format="YYYY-MM-DD HH:mm:ss"
                    date-format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" />
            </template>

            <template v-else-if="item.type === 'daterange'">
                <el-date-picker :size="size" v-model="searchData[item.key]" type="daterange"
                    :start-placeholder="item?.placeholder?.[0] || '开始日期'"
                    :end-placeholder="item?.placeholder?.[1] || '结束日期'" format="YYYY-MM-DD" date-format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" />
            </template>


        </el-form-item>

        <el-form-item>

            <el-button v-if="converterSearchFields.length > 0" type="primary" @click="getData(1)"
                :size="size">查询</el-button>

            <template v-if="buttons.length > 0">

                <el-button v-for="item, key in buttons" :key="key" :type="item?.type || 'primary'" :size="size"
                    @click="item.click">{{ item.label }}</el-button>

            </template>

        </el-form-item>
    </el-form>

    <el-table :data="data.result" style="width: 100%">

        <template v-for="item, key in fields" :key="key">

            <template v-if="typeof item == 'object'">
                <el-table-column :prop="key" :label="item.label">
                    <el-table-column v-for="son, k in item.children" :key="k" :prop="k" :label="son"
                        :show-overflow-tooltip="showOverflowTooltip.includes(k)" />
                </el-table-column>
            </template>

            <template v-else>

                <template v-if="key in custom">

                    <el-table-column :prop="key" :label="item"
                        :show-overflow-tooltip="showOverflowTooltip.includes(key)">
                        <template #default="scope">

                            <template v-if="custom[key]?.type == 'link'">
                                <el-link :href="item" target="_blank">{{ custom[key]?.label(scope) ?
        custom[key]?.label(scope) : item }}</el-link>
                            </template>

                            <template v-if="custom[key]?.type == 'tag'">
                                <el-tag :type="item?.stype || 'primary'">{{ custom[key]?.label(scope) ?
        custom[key]?.label(scope) : item }}</el-tag>
                            </template>

                            <template v-else-if="custom[key]?.type == 'img'">
                                <el-image style="width: 100px; height: 100px" :src="scope.row[key]"
                                    @click="custom[key]?.click && custom[key].click(scope)" />
                            </template>

                            <template v-else-if="custom[key]?.type == 'switch'">
                                <el-switch v-model="data.result[scope.$index][key]"
                                    :active-value="custom[key]?.active_value ?? '1'"
                                    :inactive-value="custom[key]?.inactive_value ?? '0'"
                                    @click="custom[key]?.click && custom[key].click(scope)" />
                            </template>

                            <template v-else-if="custom[key]?.type == 'popover'">
                                <el-popover placement="right" :width="400">
                                    <template #reference>
                                        查看信息
                                    </template>
                                    <template
                                        v-if="scope.row[key] != null && typeof scope.row[key] == 'object' && Object.keys(scope.row[key])?.length > 0">

                                        <el-descriptions title="字段信息" :column="2" border>
                                            <el-descriptions-item v-for="obj_val, obj_k in scope.row[key]"
                                                :label="obj_k">
                                                {{ obj_val }}
                                            </el-descriptions-item>

                                        </el-descriptions>
                                    </template>

                                    <template v-else>
                                        {{ scope.row[key] }}
                                    </template>

                                </el-popover>
                            </template>

                            <template v-else>
                                <el-text class="mx-1" @click="custom[key]?.click && custom[key].click(scope)">{{
        custom[key]?.label ? custom[key]?.label(scope) : scope.row[key] }}</el-text>
                            </template>

                        </template>
                    </el-table-column>
                </template>

                <template v-else>
                    <el-table-column :prop="key" :label="item"
                        :show-overflow-tooltip="showOverflowTooltip.includes(key)" />
                </template>


            </template>
        </template>

        <el-table-column v-if="options.length > 0" fixed="right" label="操作" width="120">
            <template #default="scope">
                <template v-for="item, key in options" :key="key">

                    <el-button v-if="!item.check || item.check(scope)" link :type="item?.type || 'primary'" :size="size"
                        @click.prevent="item.click && item.click(scope)">{{ item.label }}</el-button>
                </template>

            </template>
        </el-table-column>
    </el-table>

    <div class="page">
        <el-pagination background :layout="layout" :total="parseInt(data.total)" small :default-page-size="num"
            v-model:current-page="searchData.page" @current-change="currentChange" />
    </div>
</template>

<script setup>
import http from '@/util/http'
import { message } from '@/util/message'
import { ElMessageBox } from 'element-plus';
import { reactive, onMounted, computed, defineExpose } from 'vue'

const props = defineProps({
    apiData: {
        type: [String, Function],
        required: true
    },
    options: {
        type: Object,
        default: () => {
            return {}
        }
    },
    fields: {
        type: Object,
        required: true
    },
    searchFields: {
        type: [Array, Function],
        default: () => {
            return []
        }
    },
    buttons: {
        type: Object,
        default: () => {
            return {}
        }
    },
    total: {
        tyoe: Number,
        default: 0
    },
    layout: {
        type: String,
        default: 'prev, pager, next'
    },
    size: {
        type: String,
        default: 'small'
    },
    num: {
        type: Number,
        default: 2000 // 默认不分页
    },
    custom: {
        type: Object,
        default: () => {
            return {}
        }
    },
    showOverflowTooltip: {
        type: Array,
        default: () => {
            return []
        }
    }
})

const data = reactive({})

const searchData = reactive({
    page: 1,
    num: props.num
})

const initSearchData = () => {
    props.searchFields.filter(item => {
        return typeof item.value !== 'undefined'
    }).forEach(({ key, value }) => {
        if (typeof value === 'function') {
            searchData[key] = value()
        } else {
            searchData[key] = value
        }
    });
}

const currentChange = (page) => {
    searchData.page = page
    getData()
}

const handleResponse = (res) => {
    data.result = res.lists
    data.total = res.total
}

const getData = (page) => {
    if (page) {
        searchData.page = page
    }

    if (typeof props.apiData === 'function') {
        props.apiData(searchData).then(handleResponse)
    } else {
        http.post(props.apiData, searchData).then(handleResponse)
    }

}


defineExpose({
    refresh() {
        searchData.page = 1
        searchData.num = props.num
        getData()
    },
    firstPage() {
        searchData.page = 1
        getData()
    },
    searchData,
    getData,
    data
})

onMounted(async () => {
    await initSearchData()
    await getData()
})

const converterSearchFields = computed(() => {
    return props.searchFields.map(function (item) {
        if (item.type === 'select' && typeof item.options === 'function') {
            item.options().then(res => {
                // this.searchFields[i].options = res
                item.options = res
            })
        }

        return item
    })
})

</script>